<template>
	<view class="order-wrap">
		<Tabs :TabList="tabList" :currentTab="checkedTab" @tabs="tabsChange" :lineWidth="'160'">
			<TabPane>
				<view class="order-body" v-if="state==='all'">
					<view class="order-item bg-white" v-for="(item, index) in orderList" :key="index">
						<view class="header flex-x-between">
							<view class="title">
								<view class="msg-icon inline-block text-center"><text :class="[`iconfontPT ${judgeIcon(item.type)}`]"></text></view>
								{{item.title}}
							</view>
							<text class="state theme">{{item.stateName}}</text>
						</view>
						<view class="body flex-x-start">
							<image class="avatar" :src="avatarSrc(item.type,item.img)" mode="aspectFill" />
							<view class="info">
								<text class="orderName block">{{item.order_title}}</text>
								<text class="amount block theme">￥{{item.pay_money}}</text>
							</view>
						</view>
						<view class="pay-amount-wrap flex-x-end">
							{{item.state==='awaitUse' ? "实付金额：" : "合计："}}
							<text class="pay-amount block theme">￥{{item.pay_money}}</text>
						</view>
						<view class="footer flex-x-end">
							<navigator class="btn detail-btn" hover-class="hoverClass" :url="`/pages/personal/order-detail/index?id=${item.order_no}`">订单详情</navigator>
							<view class="btn cancel-btn" v-if="item.state===0" hover-class="none" @click="handleCancelOrder(item.order_no)">取消订单</view>
							<view class="btn comment-btn" v-if="item.type===1&&item.state===2" @click="handleEvaluat(item.store_id, item.order_no)">立即评价</view>
							<view class="btn to-pay-btn" v-if="item.state===0" @click="handlePayment(item)">立即付款</view>
						</view>
					</view>
					<no-data v-if="!orderList.length" texts="暂无订单"/>
				</view>
			</TabPane>
			<TabPane>
				<view class="order-body" v-if="state===0">
					<view class="order-item bg-white" v-for="(item, index) in orderList" :key="index">
						<view class="header flex-x-between">
							<view class="title">
								<view class="msg-icon inline-block text-center"><text :class="[`iconfontPT ${judgeIcon(item.type)}`]"></text></view>
								{{item.title}}
							</view>
							<text class="state theme">{{item.stateName}}</text>
						</view>
						<view class="body flex-x-start">
							<image class="avatar" :src="avatarSrc(item.type,item.img)" mode="aspectFill" />
							<view class="info">
								<text class="orderName block">{{item.order_title}}</text>
								<text class="amount block theme">￥{{item.pay_money}}</text>
							</view>
						</view>
						<view class="pay-amount-wrap flex-x-end">
							{{item.state==='awaitUse' ? "实付金额：" : "合计："}}
							<text class="pay-amount block theme">￥{{item.pay_money}}</text>
						</view>
						<view class="footer flex-x-end">
							<navigator class="btn detail-btn" hover-class="hoverClass" :url="`/pages/personal/order-detail/index?id=${item.order_no}`">订单详情</navigator>
							<view class="btn cancel-btn" v-if="item.state===0" hover-class="none" @click="handleCancelOrder(item.order_no)">取消订单</view>
							<view class="btn comment-btn" v-if="item.type===1&&item.state===2" @click="handleEvaluat(item.store_id, item.order_no)">立即评价</view>
							<view class="btn to-pay-btn" v-if="item.state===0" @click="handlePayment(item)">立即付款</view>
						</view>
					</view>
					<no-data v-if="!orderList.length" texts="暂无订单"/>
				</view>
			</TabPane>
			<TabPane>
				<view class="order-body" v-if="state===1">
					<view class="order-item bg-white" v-for="(item, index) in orderList" :key="index">
						<view class="header flex-x-between">
							<view class="title">
								<view class="msg-icon inline-block text-center"><text :class="[`iconfontPT ${judgeIcon(item.type)}`]"></text></view>
								{{item.title}}
							</view>
							<text class="state theme">{{item.stateName}}</text>
						</view>
						<view class="body flex-x-start">
							<image class="avatar" :src="avatarSrc(item.type,item.img)" mode="aspectFill" />
							<view class="info">
								<text class="orderName block">{{item.order_title}}</text>
								<text class="amount block theme">￥{{item.pay_money}}</text>
							</view>
						</view>
						<view class="pay-amount-wrap flex-x-end">
							{{item.state==='awaitUse' ? "实付金额：" : "合计："}}
							<text class="pay-amount block theme">￥{{item.pay_money}}</text>
						</view>
						<view class="footer flex-x-end">
							<navigator class="btn detail-btn" hover-class="hoverClass" :url="`/pages/personal/order-detail/index?id=${item.order_no}`">订单详情</navigator>
							<view class="btn cancel-btn" v-if="item.state===0" hover-class="none" @click="handleCancelOrder(item.order_no)">取消订单</view>
							<view class="btn comment-btn" v-if="item.type===1&&item.state===2" @click="handleEvaluat(item.store_id, item.order_no)">立即评价</view>
							<view class="btn to-pay-btn" v-if="item.state===0" @click="handlePayment(item)">立即付款</view>
						</view>
					</view>
					<no-data v-if="!orderList.length" texts="暂无订单"/>
				</view>
			</TabPane>
			<TabPane>
				<view class="order-body" v-if="state===2">
					<view class="order-item bg-white" v-for="(item, index) in orderList" :key="index">
						<view class="header flex-x-between">
							<view class="title">
								<view class="msg-icon inline-block text-center"><text :class="[`iconfontPT ${judgeIcon(item.type)}`]"></text></view>
								{{item.title}}
							</view>
							<text class="state theme">{{item.stateName}}</text>
						</view>
						<view class="body flex-x-start">
							<image class="avatar" :src="avatarSrc(item.type,item.img)" mode="aspectFill" />
							<view class="info">
								<text class="orderName block">{{item.order_title}}</text>
								<text class="amount block theme">￥{{item.pay_money}}</text>
							</view>
						</view>
						<view class="pay-amount-wrap flex-x-end">
							{{item.state==='awaitUse' ? "实付金额：" : "合计："}}
							<text class="pay-amount block theme">￥{{item.pay_money}}</text>
						</view>
						<view class="footer flex-x-end">
							<navigator class="btn detail-btn" hover-class="hoverClass" :url="`/pages/personal/order-detail/index?id=${item.order_no}`">订单详情</navigator>
							<view class="btn cancel-btn" v-if="item.state===0" hover-class="none" @click="handleCancelOrder(item.order_no)">取消订单</view>
							<view class="btn comment-btn" v-if="item.type===1&&item.state===2" @click="handleEvaluat(item.store_id, item.order_no)">立即评价</view>
							<view class="btn to-pay-btn" v-if="item.state===0" @click="handlePayment(item)">立即付款</view>
						</view>
					</view>
					<no-data v-if="!orderList.length" texts="暂无订单"/>
				</view>
			</TabPane>
			<TabPane>
				<view class="order-body" v-if="state === 3">
					<view class="order-item bg-white" v-for="(item, index) in orderList" :key="index">
						<view class="header flex-x-between">
							<view class="title">
								<view class="msg-icon inline-block text-center"><text :class="[`iconfontPT ${judgeIcon(item.type)}`]"></text></view>
								{{item.title}}
							</view>
							<text class="state theme">{{item.stateName}}</text>
						</view>
						<view class="body flex-x-start">
							<image class="avatar" :src="avatarSrc(item.type,item.img)" mode="aspectFill" />
							<view class="info">
								<text class="orderName block">{{item.order_title}}</text>
								<text class="amount block theme">￥{{item.pay_money}}</text>
							</view>
						</view>
						<view class="pay-amount-wrap flex-x-end">
							{{item.state==='awaitUse' ? "实付金额：" : "合计："}}
							<text class="pay-amount block theme">￥{{item.pay_money}}</text>
						</view>
						<view class="footer flex-x-end">
							<navigator class="btn detail-btn" hover-class="hoverClass" :url="`/pages/personal/order-detail/index?id=${item.order_no}`">订单详情</navigator>
							<view class="btn cancel-btn" v-if="item.state===0" hover-class="none" @click="handleCancelOrder(item.order_no)">取消订单</view>
							<view class="btn comment-btn" v-if="item.type===1&&item.state===2" @click="handleEvaluat(item.store_id, item.order_no)">立即评价</view>
							<view class="btn to-pay-btn" v-if="item.state===0" @click="handlePayment(item)">立即付款</view>
						</view>
					</view>
					<no-data v-if="!orderList.length" texts="暂无订单"/>
				</view>
			</TabPane>
			<TabPane>
				<view class="order-body" v-if="state===5">
					<view class="order-item bg-white" v-for="(item, index) in orderList" :key="index">
						<view class="header flex-x-between">
							<view class="title">
								<view class="msg-icon inline-block text-center"><text :class="[`iconfontPT ${judgeIcon(item.type)}`]"></text></view>
								{{item.title}}
							</view>
							<text class="state theme">{{item.stateName}}</text>
						</view>
						<view class="body flex-x-start">
							<image class="avatar" :src="avatarSrc(item.type,item.img)" mode="aspectFill" />
							<view class="info">
								<text class="orderName block">{{item.order_title}}</text>
								<text class="amount block theme">￥{{item.pay_money}}</text>
							</view>
						</view>
						<view class="pay-amount-wrap flex-x-end">
							{{item.state==='awaitUse' ? "实付金额：" : "合计："}}
							<text class="pay-amount block theme">￥{{item.pay_money}}</text>
						</view>
						<view class="footer flex-x-end">
							<navigator class="btn detail-btn" hover-class="hoverClass" :url="`/pages/personal/order-detail/index?id=${item.order_no}`">订单详情</navigator>
							<view class="btn cancel-btn" v-if="item.state===0" hover-class="none" @click="handleCancelOrder(item.order_no)">取消订单</view>
							<view class="btn comment-btn" v-if="item.type===1&&item.state===2" @click="handleEvaluat(item.store_id, item.order_no)">立即评价</view>
							<view class="btn to-pay-btn" v-if="item.state===0" @click="handlePayment(item)">立即付款</view>
						</view>
					</view>
					<no-data v-if="!orderList.length" texts="暂无订单"/>
				</view>
			</TabPane>
		</Tabs>
	</view>
</template>

<script>
	import Tabs from '../../components/public/tabs.vue'
	import TabPane from '../../components/public/tabPane.vue'
	import {
		payment,
		getMyOrder,
		cancelMyOrder
	} from '../../../apis/personal/index.js'

	export default {
		data() {
			return {
				page: 1,
				checkedTab: 0,
				orderList: [],
				tabList: [{
						title: '全部',
						state: 'all'
					},
					{
						title: '待付款',
						state: 0
					},
					{
						title: '待使用',
						state: 1
					},
					{
						title: '待评价',
						state: 2
					},
					{
						title: '已完成',
						state: 3
					},
					{
						title: '退款/售后',
						state: 5
					}
				],
				orderList: []
			}
		},
		onLoad(option) {
			this.checkedTab = +option.state
			this.getOrderList()
		},
		components: {
			Tabs,
			TabPane,
		},
		computed: {
			avatarSrc(type,img) {
				return (type, img) => {
					return (type== 3 ? this.$baseHost.qiniuHost : this.$baseHost.car) + '/' + img;
				};
			},
			judgeIcon(type) {
				let icon = ''
				return function(type) {
					switch (type) {
						case 1:
							icon = 'iconmendian'
							break;
						case 2:
							icon = 'iconcheliang'
							break;
						case 3:
							icon = 'iconcheliang'
							break;
						case 4:
							icon = 'iconzhiwei'
							break;
						case 5:
							icon = 'iconhuodong'
							break;
						case 6:
							icon = 'iconhuodong'
							break;
					}
					return icon
				}
			},
			state() {
				let state = 0
				switch (this.checkedTab) {
					case 0:
						state = 'all'
						break;
					case 1:
						state = 0
						break;
					case 2:
						state = 1
						break;
					case 3:
						state = 2
						break;
					case 4:
						state = 3
						break;
					case 5:
						state = 5
						break;
				}
				return state
			},
		},
		methods: {
			handleCancelOrder(order_no) {
				let _this = this
				uni.showModal({
					title: "提示",
					content: "确认删除该订单？",
					success: res => {
						if (res.confirm) {
							_this.$loading.show()
							cancelMyOrder({
								order_no
							}).then(_res => {
								if (+_res.code === 200) {
									uni.showToast({
										title: _res.info,
										icon: 'success'
									})
									_this.$loading.hide();
									_this.getOrderList();
								}
							})
						}
					}
				});
			},
			getOrderList() {
				let params = {
					page: this.page,
					state: this.state === 'all' ? '' : this.state
				}
				this.$loading.show()
				getMyOrder(params).then(res => {
					if (+res.code === 200) {
						this.orderList = res.data;
						this.$loading.hide();
					}
				})
			},
			handlePayment(item) {
				let _this = this,
					params = {
						total_money: item.total_money,
						district_money: item.district_money,
						pay_money: item.pay_money,
						coupon_id: item.coupon_id ? item.coupon_id : '',
						item_id: item.type,
						store_id: item.store_id,
						factory_id: item.type,
						type: item.type,
						order_title: item.order_title,
						num: item.type,
						goods_id: item.type,
						img: item.type,
						order_no: item.order_no
					};

				payment(params).then(res => {
					if (res.code == 1) {
						uni.requestPayment({
							appId: res.data.appId,
							nonceStr: res.data.nonceStr,
							package: res.data.package,
							paySign: res.data.paySign,
							signType: res.data.signType,
							timeStamp: res.data.timeStamp,
							success(res) {
								uni.showToast({
									title: '支付成功！',
									icon: 'success'
								})
								_this.getOrderList()
							},
							fail(err) {
								console.log(err)
							}
						})
					}
				})
			},
			tabsChange(index) {
				this.checkedTab = index
				this.getOrderList()
			},
			handleEvaluat(store_id, order_no) {
				uni.navigateTo({
					url: `/pages/personal/evaluate/index?store_id=${store_id}&order_no=${order_no}`
				})
			},
		}
	}
</script>

<style lang="less">
	.order-wrap {
		background: #f8f8f8;

		.msg-icon {
			width: 36rpx;
			height: 36rpx;
			background: #E41805;
			border-radius: 100%;
			text-align: center;
			line-height: 35rpx;
			margin-right: 15rpx;

			.iconfontPT {
				color: #ffffff;
				font-size: 20rpx;
			}
		}

		.order-body {
			.order-item {
				margin-top: 30rpx;
				padding: 0 35rpx;
				box-sizing: border-box;

				.header {
					font-size: 28rpx;
					border-bottom: 1rpx solid rgba(204, 204, 204, .5);
					padding: 30rpx 0;
					box-sizing: border-box;

					.name {
						font-size: 30rpx;
					}
				}

				.body {
					border-bottom: 1rpx solid rgba(204, 204, 204, .5);
					font-size: 28rpx;
					padding: 30rpx 0;
					box-sizing: border-box;

					.avatar {
						width: 120rpx;
						height: 120rpx;
						margin-right: 20rpx;
						border-radius: 20rpx;
					}

					.amount {
						font-size: 20rpx;
					}
				}

				.pay-amount-wrap {
					padding: 30rpx 0;
					font-size: 30rpx;
					box-sizing: border-box;
					border-bottom: 1rpx solid rgba(204, 204, 204, .5);
				}

				.footer {
					padding: 30rpx 0;

					.btn {
						color: #343434;
						font-size: 26rpx;
						padding: 10rpx 40rpx;
						box-sizing: border-box;
						margin-left: 20rpx;
						background: rgba(255, 255, 255, 1);
						border: 2rpx solid #CCCCCC;
						border-radius: 27rpx;

						&.comment-btn,
						&.pay-btn {
							border-color: #E41906;
							color: #E41906;
						}
					}
				}
			}


		}
	}
</style>
